iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
Mobile Development

SwiftUI 男孩系列 第 5

Day 5: SwiftUI 奮泳向前刻 UI

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20230919/20130138ZczMFpckkr.jpg

Photo by James Pere on Unsplash

在 Assets 資料夾下,放 ArtisticSwimming, Backstroke, Breaststroke, Butterfly, Freestyle 不同游泳姿勢的圖檔。

https://ithelp.ithome.com.tw/upload/images/20230919/20130138kv3aozN4Wv.png

Circle()
    .fill(.blue)  
    .padding()
    .overlay(
         Image("ArtisticSwimming")
     )
  • Circle():建立一個圓
  • fill(.blue):用藍色填滿它
  • padding():內間距(Padding)是指元素內部邊緣和其內容之間的空間。
  • overlay():在圓形上覆蓋一個圖像。

https://ithelp.ithome.com.tw/upload/images/20230919/20130138nw3ZvV3y46.png

哇!!Image 太大了!我們來新增三個修飾符。

Image("ArtisticSwimming")
    .resizable()
		.frame(width: 300, height: 300)
    .clipShape(Circle())
  • resizable():將該圖片設置為可調整大,這樣它就可以適應其容器的尺寸。
  • frame():設定宽度和高度尺寸。設定你喜歡的尺寸,30公分也行。
  • clipShape(Circle()):將圖片裁剪為圓形。

https://ithelp.ithome.com.tw/upload/images/20230919/20130138uZMnP2T0Y3.png

我們在加個游泳姿勢標題

Text("ArtisticSwimming!")
    .font(.title)
    .padding(.top, 10)

font(.title):設定字體大小。

.padding(.top, 10):跟上面元素有10點間距空間。

記得包 VStack { } 裡。就像水餃一樣包內餡。如果你愛吃沒有內餡的水餃,請在下方 push your hands up 留言。

https://ithelp.ithome.com.tw/upload/images/20230919/20130138DSzAAEiWr3.png

再加個青春洋溢的標題

Text("奮泳向前")
    .font(.system(size: 36))

Text("今天要揮灑汗水的姿勢")
    .font(.system(size: 18))
    .padding(.top, 5)

字體 Size 大小寫固定 ?! 太沒有 sense 了

手機設定 → 螢幕顯示與亮度 → 文字大小

https://ithelp.ithome.com.tw/upload/images/20230919/20130138KdbgQGQVf9.jpg

改天一定會被 PM 要求 Text style font can adapt to Dynamic Type size.

有錢的 User 阿姨,看不慣字體太小,要變大功能

Apple font 支援 Dynamic Type size 以下格式.

  • Large Title
  • Title 1
  • Title 2
  • Title 3
  • Headline
  • Body
  • Callout
  • Subhead
  • Footnote
  • Caption 1
  • Caption 2

code 改成如下

Text("奮泳向前")
     .font(.largeTitle.bold())

Text("今天要揮灑汗水的姿勢")
     .font(.title2)
     .padding(.top, 5)

https://ithelp.ithome.com.tw/upload/images/20230919/20130138msQA8BZNAj.png
https://ithelp.ithome.com.tw/upload/images/20230919/20130138zO2zARtNkQ.png

Text font size 可變大變小,伸縮自如,有錢的 User 阿姨愛死了,買 iPhone 16 頂頂規送你


比較 UIKit 寫法,SwiftUI 太精簡 👍🏻

// SwiftUI
Text("奮泳向前")
     .font(.largeTitle.bold())
// UIKit
label.font = UIFont.preferredFont(forTextStyle: .body)

Ref:

https://sarunw.com/posts/swiftui-text-font/

https://sarunw.com/posts/how-to-change-swiftui-font-size/

(感謝hokou發現我po錯屆it鐵人賽,好人一生平安😇


上一篇
Day 4: SwiftUI 全新的布局系統
下一篇
Day 6: 向 leading 遊·向 trailing 遊
系列文
SwiftUI 男孩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言